vue3通过render函数实现一个菜单下拉框 |
您所在的位置：网站首页 › element ui动态菜单 › vue3通过render函数实现一个菜单下拉框 |
vue3通过render函数实现一个菜单下拉框
|
背景说明
鼠标移动到产品服务上时，出现标红的下拉框。 使用纯css的方案实现最简单，但是没什么技术含量，弃之；使用第三方组件库，样式定制麻烦弃之。因此，我们使用vue3直接在页面创建一个dom作为下拉框吧。 技术方案 先写一个下拉框组件首先，我们先写一个组件，用来展示下拉框内容。组件名称起为 ：Select.vue 福利商城 Saas平台 活动定制 复制代码我们要将这个组件渲染在网页上，操作应该是这样的： 当鼠标移动到产品服务时，将下拉框组件作为一个组件实例渲染在页面的合适位置。 vue3中，渲染一个Vonde，核心逻辑如下： import { createVNode, h, render, VNode } from 'vue' import component from "./component.vue" //1、创造包裹虚拟节点的div元素 const container = document.createElement('div'); //2、创造虚拟节点 vm = createVNode(component) //3、将虚拟节点创造成真实DOM render (vm, container) //4、将渲染的结果放到body下 document.body.appendChild(container.firstElementChild) 复制代码要知道组件渲染的位置，我们必须知道父组件（也就是产品服务的dom位置），我们通过ref来获取父组件的dom信息。 // App.vue 产品服务 import { ref } from "vue" const select = ref() 复制代码当鼠标移到产品服务元素上时，渲染下拉框，我们添加个函数 // App.vue 产品服务 import { ref } from "vue" import Select from "./Select.vue" const select = ref() function createDom(){ //1、创造包裹虚拟节点的div元素 const container = document.createElement('div'); //2、创造虚拟节点 let vm = createVNode(Select) //3、将虚拟节点创造成真实DOM render (vm, container) //4、将渲染的结果放到body下 document.body.appendChild(container.firstElementChild) } 复制代码然后，添加下位置判断 function createDom(){ const left = select.value.offsetLeft + "px" const width = select.value.getBoundingClientRect().left + "px" const props = { width, left, } //1、创造包裹虚拟节点的div元素 const container = document.createElement('div'); //2、创造虚拟节点 let vm = createVNode(Select,props) //3、将虚拟节点创造成真实DOM render (vm, container) //4、将渲染的结果放到body下 document.body.appendChild(container.firstElementChild) } 复制代码其中，prop是传递给Select组件的距离参数，在组件内设置即可。 销毁组件销毁组件，我们可以使用render渲染一个空对象即可 render (vm, container) 复制代码如果需要子组件来销毁自身，我们可以使用父子传值 福利商城 Saas平台 活动定制 const emit = defineEmits(['destroy']) function beforeUnload(){ emit('destroy') } 复制代码父组件里，我们需要在props中添加一个onDestroy函数，注意：onDestroy是驼峰式写法 function createDom(){ const left = select.value.offsetLeft + "px" const width = select.value.getBoundingClientRect().left + "px" const props = { width, left, onDestroy: () => { render(null, container) }, } //1、创造包裹虚拟节点的div元素 const container = document.createElement('div'); //2、创造虚拟节点 let vm = createVNode(Select,props) //3、将虚拟节点创造成真实DOM render (vm, container) //4、将渲染的结果放到body下 document.body.appendChild(container.firstElementChild) } 复制代码这样，就实现了下拉框组件 |
【本文地址】
今日新闻 |
推荐新闻 |